<template>
	<div class="recent_win">
		<!-- <GameTypeTab :tabs="gameTabs" :activeId="activeId" :icon-base-url="settings.backend_upload" ref="gameTypeTabRef"
			@tab-click="handleTabs">
		</GameTypeTab> -->
    <div class="top_tip">
      <div class="top_tip_img">
        <img src="/imgs/recentWin/top.png" alt="">
      </div>
      <div class="title">
        <p>{{ $t('home_page_winning') }}</p>
        <p>TOP50</p>
      </div>
      <div class="date">
        {{ $t('recent_win_endTime') }}<br>
        {{ date }}
      </div>
    </div>
    <nut-tabs ref="navs" v-model="activeId" title-scroll title-gutter="10" :swipeable="swipeable" @change="change">
      <template #titles>
        <div 
          class="custom_tab_item nut-tabs__titles-item" 
          :class="{
            active: activeId === item.id
          }" 
          :id="activeId === item.id ? 'activeTab329' : ''"
          v-for="(item, i) in gameTabs"
          :key="item.id"
          @click="handleTabs(item, 'click', i)"
        >
          <img class="tab_item" :src="tabIcon(item)" />
          <span>{{ unserialize(item.name, false) }}</span>
        </div>
      </template>
    </nut-tabs>
    <swiper
      direction="horizontal"
      :autoplay="false"
      :loop="false"
      :touchAngle="30"
      @swiper="swiperInit"
      @slide-change="swiperChange"
    >
      <swiper-slide v-for="child in gameTabs" :key="child.id" :pane-key="child.id">
        <div class="recentwin_container" v-if="listFilter[child.id]?.length">
          <div class="each" v-for="item in listFilter[child.id]" :key="item.game_no" @click="toDetail(item)">
            <div>
              <img :src="joinURL(settings.backend_upload, item.picture_h5)" alt="">
            </div>
            <h1 class="txt_ellipsis">{{ unserialize(item?.name, false) }}</h1>
            <div class="bd"></div>
            <p class="name1 txt_ellipsis">{{ item.nickname }}</p>
            <!-- <p class="name2">{{ formatBigNumber(item.money) }}</p> -->
            <p class="name2">{{ formatNumber(item.money) }}</p>
          </div>
        </div>
        <div class="recentwin_container empty" v-else>
          <EmptyState :text="$t('nomore_data')" :showTips="false" />
        </div>
      </swiper-slide>
      </swiper>
    
		
	</div>
</template>
<script setup lang="ts">
// import { useRoute } from 'vue-router';
import { useRecentWin, formatNumber } from './hooks/useRecentWin';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { unserialize } from '@/utils/useStoreMethods';
import { joinURL } from '@/utils/publicMethods'
import { Page } from "@/store/page";
import pinia from "@/store";
import { storeToRefs } from "pinia";
import dayjs from 'dayjs';
import { computed, onActivated, ref, nextTick } from 'vue';
import EmptyState from '../searchGames/components/EmptyState.vue'

import 'swiper/css';
// import GameTypeTab from "@/components/GameTypeTab.vue";

// const route = useRoute();

const { settings, homeGameData } = storeToRefs(Page(pinia));
const { list, init, toDetail } = useRecentWin()
init()

const date = ref(dayjs().format('DD/MM/YYYY HH:mm'))

onActivated(() => {
	date.value = dayjs().format('DD/MM/YYYY HH:mm')
})

const navs = ref()
const swiperInstance = ref()
const swipeable = ref(true)
const activeId = ref(-1)
const gameTabs: any = computed(() => {
  const arr = [{
    id: -1,
    icon_h5: "/imgs/home/tab-1.webp",
    icon_h5_before: "/imgs/home/tab-1-1.webp",
    name: { "en-US": "All", "vi-VN": "tất cả", "zh-CN": "全部" },
  }]
  const arr2 = homeGameData.value.filter((e: any) => e.id != 0);
  return arr.concat(arr2)
})

const listFilter = computed(() => {
  const map = {} as any

  gameTabs.value.forEach((e: any) => {
    if (e.id === -1) {
      map[e.id] = list.value
    } else {
      map[e.id] = list.value.filter((el: any) => e.id === el.parentId)
    }
  })

  return map
})

function swiperInit(swiper: any) {
  swiperInstance.value = swiper
}

function slideTo() {
  nextTick(() => {
    const bar = document.getElementById('activeTab329')
    bar?.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
      inline: 'center',
    });
    
  })
}

function swiperChange(e: any) {
  handleTabs(gameTabs.value[e.realIndex])
}

const handleTabs = (v: any, type?: string, i?: number) => {
	activeId.value = v.id;
  slideTo()

  if (type === 'click') {
    swiperInstance.value.slideTo(i)
  }
};

function change(v: any) {
  activeId.value = Number(v.paneKey);
  const d = gameTabs.value.find((e: any) => e.id == activeId.value)
  handleTabs(d)
}

// 图标处理逻辑
const tabIcon = computed(() => (item: any) => {
	const isSpecialTab = [0, -1].includes(Number(item.id));
	const icon = activeId.value === item.id ? item.icon_h5 : item.icon_h5_before;

	return isSpecialTab ? icon : joinURL(settings.value.backend_upload, icon);
});

// document.addEventListener("touchstart", handleTouchStart, false);
// document.addEventListener("touchmove", handleTouchMove, { passive: false });
// document.addEventListener("touchend", handleTouchEnd, { passive: false });

// let startX = 0, startY = 0;

// function handleTouchStart(event: any) {
//   const touch = event.touches[0];
//   startX = touch.clientX;
//   startY = touch.clientY;
// }

// function handleTouchMove(event: any) {
//   const touch = event.touches[0];
//   const moveX = touch.clientX;
//   const moveY = touch.clientY;

//   const diffX = moveX - startX;
//   const diffY = moveY - startY;

//   if (Math.abs(diffX) > Math.abs(diffY)) {
//     // 主要是水平滑动
//     const angleX = Math.abs(Math.atan(diffY / diffX) * (180 / Math.PI));
//     if (angleX < 20) {
//       swipeable.value = true
//     } else {
//       swipeable.value = false
//     }
//   } else {
//     // 主要是垂直滑动
//     const angleY = Math.abs(Math.atan(diffX / diffY) * (180 / Math.PI));
//     if (angleY < 20) {
//       swipeable.value = false
//     } else {
//       swipeable.value = false
//     }
//   }
// }

// function handleTouchEnd() {
//   swipeable.value = true
// }

</script>
<style lang="scss" scoped>
:deep {
  .custom_tab {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.recent_win {
	padding: 0 16px;
	position: relative;
	box-sizing: border-box;

	.top_tip {
		border-radius: 8px;
		background: linear-gradient(95deg, #FA397E 0%, #FF852D 99.32%), #FFF;
		width: 90%;
		height: 48px;
		margin: 0 auto;
		padding: 10px;
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 10px;
    position: fixed;
    top: calc(94px + env(safe-area-inset-top));
    left: 16px;
    z-index: 400;

    .top_tip_img {
      width: 34px;
      img {
        width: 100%;
        display: block;
      }
    }

    .title {
      margin-left: 6px;
      >p:first-child {
        color: #FFF;
        font-size: 12px;
        font-weight: 500;
        line-height: 14px;
      }
      >p:last-child {
        color: #FFE141;
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
      }
    }

    .date {
      color: #FFF;
      text-align: right;
      font-size: 12px;
      font-weight: 400;
      line-height: 14px;
      position: absolute;
      right: 10px;
    }
  }

	.recentwin_container {
		margin-top: 114px;
		max-height: calc(var(--vh) * 100 - 170px - env(safe-area-inset-top));
		overflow-y: auto;
		padding: 0;
		position: relative;
		transform: none;
		// border: 1px solid #f00;
		z-index: 1;
		scroll-behavior: unset;
		display: flex;
		padding-top: 0;
		margin-left: -6px;
		flex-wrap: wrap;
		padding-bottom: 12px;

    &.empty {
      height: calc(var(--vh) * 100 - 170px - env(safe-area-inset-top));
      justify-content: center;
      align-items: center;
      text-align: center;
      animation: empty .3s linear;
      @keyframes empty {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    }

    .each {
      height: 172px;
      width: 110px;
      padding: 8px 8px 4px 8px;
      border-radius: 14px;
      background: #131232;
      box-shadow: 0.875px 0.875px 1.75px 0px #2E296B inset;
      margin-left: 6px;
			box-sizing: border-box;
			margin-bottom: 6px;
			overflow: hidden;
			img {
				width: 100%;
				height: 98px;
				border-radius: 14px;
				object-fit: cover;
				display: block;
			}
			h1 {
				color: #fff;
				font-size: 14px;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
				width: 100%;
				margin: 2px 0;
				text-align: center;
			}

			.bd {
				width: 100%;
				border-bottom: 1px solid rgba(255, 255, 255, 0.06);
				margin-top: 2px;
			}

			p.name1 {
				color: #A8A8CA;
				font-size: 12px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				margin-top: 3px;
				text-align: center;
			}

			p.name2 {
				color: #ED8302;
				font-size: 14px;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
				margin-top: 0px;
				text-align: center;
			}
    }

	}
}

.custom_tab_item {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--inactive-color);
  font-size: 14px !important;
  font-weight: 400;
  margin: 0 10px;

  &:nth-last-child(2) {
    margin-right: 0;
  }

  .tab_item {
    width: 14px;
    height: 14px;
    margin-right: 3px;
    object-fit: contain;
  }
}

:deep(.nut-tabs) {
  .nut-tabs__titles {
    margin-left: -10px;
    margin-bottom: 0;
    scrollbar-width: none;
    position: fixed;
    z-index: 300;
    width: 96%;
    overflow-y: visible !important;
    // position: relative;
    // z-index: 100;
  }
  .nut-tabs__titles .nut-tabs__titles-item.active::after {
    width: 100%;
  }
}
</style>
